<template>
  <div class="dashboard-editor-container">

    <panel-group ref="panelgroup"/>

    <el-row style="background:#fff;padding:16px 16px 0px;margin-bottom:32px;">
      <line-chart-day ref="lineChartDay"  />
    </el-row> 

    <el-row style="background:#fff;padding:16px 16px 0px;margin-bottom:32px;">
      <line-chart-month ref="lineChartMonth" />
    </el-row> 

    <el-row :gutter="32" v-if=false>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <raddar-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <pie-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <bar-chart />
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import request from '@/utils/request'
import PanelGroup from './dashboard/PanelGroup'
import LineChartDay from './dashboard/LineChartDay'
import LineChartMonth from './dashboard/LineChartMonth'
import RaddarChart from './dashboard/RaddarChart'
import PieChart from './dashboard/PieChart'
import BarChart from './dashboard/BarChart'


export default {
  name: 'Index',
  components: {
    PanelGroup,
    LineChartDay,
    LineChartMonth,
    RaddarChart,
    PieChart,
    BarChart
  },
  data() {
    return {
      intervalId:null,
      statistic:{
        totalCountStatistic:{
          personCount:0,
          veihcleCount:0,
          faceCount:0,
          totalCount:0,
        },
        personDayStatistic:{
          hours:[],
          counts:[]
        },
        vehicleDayStatistic:{
          hours:[],
          counts:[]
        },
        faceDayStatistic:{
          hours:[],
          counts:[]
        },

        personMonthStatistic:{
          days:[],
          counts:[]
        },
        vehicleMonthStatistic:{
          days:[],
          counts:[]
        },

        faceMonthStatistic:{
          days:[],
          counts:[]
        }
      }
    }
  },

  created() {
    this.getStatistic();
    this.dataRefreh();
  },
  destroyed(){
    this.clear();
  },
  methods: {
    dataRefreh() {
      // 计时器正在进行中，退出函数
      if (this.intervalId != null) {
        return;
      }
      // 计时器为空，操作
      this.intervalId = setInterval(() => {
        this.getStatistic(); //加载数据函数
      }, 15000);
    }, 
    // 停止定时器
    clear() {
      clearInterval(this.intervalId); //清除计时器
      this.intervalId = null; //设置为null
    },
 
    getStatistic(){
      let deptId = this.$store.getters.deptId;
      this.statisticRequest(deptId).then(response => {
            console.log(response)
            if(response.data!=null){
                 this.statistic = response.data;
                 this.$refs.panelgroup.updateData(this.statistic.totalCountStatistic)
                 this.$refs.lineChartDay.updateData(this.statistic.personDayStatistic.counts,this.statistic.vehicleDayStatistic.counts,this.statistic.faceDayStatistic.counts)
                 this.$refs.lineChartMonth.updateData(this.statistic.personMonthStatistic,this.statistic.vehicleMonthStatistic,this.statistic.faceMonthStatistic)
            }
        })
    },

    statisticRequest(deptId) {
      return request({
          url: '/system/statistic/count/'+ deptId,
          method: 'get'
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
